<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>Rukada - Responsive Bootstrap4  Admin Dashboard Template</title>
    <!--favicon-->
    <link rel="icon" th:href="@{/assets/images/favicon.ico}" type="image/x-icon">
    <!-- Bootstrap core CSS-->
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <!-- animate CSS-->
    <link th:href="@{/assets/css/animate.css}" rel="stylesheet" type="text/css"/>
    <!-- Icons CSS-->
    <link th:href="@{/assets/css/icons.css}" rel="stylesheet" type="text/css"/>
    <!-- Custom Style-->
    <link th:href="@{/assets/css/app-style.css}" rel="stylesheet"/>

</head>

<body class="bg-dark">
<!-- Start wrapper-->
<div id="wrapper">
    <div class="card card-authentication1 mx-auto my-5">
        <div class="card-body">
            <div class="card-content p-2">
                <div class="text-center">
                    <img th:src="@{/assets/images/logo-icon.png}" alt="logo icon">
                </div>
                <div class="card-title text-uppercase text-center py-3">Sign In</div>
                <form th:action="@{/user/login}" th:method="POST">
                    <div class="form-group">
                        <label for="exampleInputUsername" class="">Username</label>
                        <div class="position-relative has-icon-right">
                            <input type="text" id="exampleInputUsername" name="username" class="form-control input-shadow" placeholder="Enter Username">
                            <div class="form-control-position">
                                <i class="icon-user"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword" class="">Password</label>
                        <div class="position-relative has-icon-right">
                            <input type="password" id="exampleInputPassword" name="password" class="form-control input-shadow" placeholder="Enter Password">
                            <div class="form-control-position">
                                <i class="icon-lock"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-6">
                            <div class="icheck-material-primary">
                                <input type="checkbox" id="user-checkbox" name="remember-me" />
                                <label for="user-checkbox">Remember me</label>
                            </div>
                        </div>
                        <div class="form-group col-6 text-right">
                            <a href="authentication-reset-password.html">Reset Password</a>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary shadow-primary btn-block waves-effect waves-light">Sign In</button>
                    <div class="text-center mt-3">Sign In With</div>

                    <div class="form-row mt-4">
                        <div class="form-group mb-0 col-6">
                            <button type="button" class="btn btn-facebook shadow-facebook btn-block text-white"><i class="fa fa-facebook-square"></i> Facebook</button>
                        </div>
                        <div class="form-group mb-0 col-6 text-right">
                            <button type="button" class="btn btn-twitter shadow-twitter btn-block text-white"><i class="fa fa-twitter-square"></i> Twitter</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
        <div class="card-footer text-center py-3">
            <p class="text-muted mb-0">Do not have an account? <a href="authentication-signup.html"> Sign Up here</a></p>
        </div>
    </div>

    <!--Start Back To Top Button-->
    <a href="javaScript:void(0);" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
    <!--End Back To Top Button-->
</div><!--wrapper-->

<!-- Bootstrap core JavaScript-->
<script th:src="@{/assets/js/jquery.min.js}"></script>
<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>

</body>
</html>
